<%--
  Created by IntelliJ IDEA.
  User: 忍
  Date: 2019/7/1
  Time: 15:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/learn.css">
    <link rel="stylesheet" href="../css/captcha.min.css">
    <link rel="stylesheet" href="../css/moco.min.css">
    <link rel="stylesheet" href="../css/layer.css">
    <link rel="stylesheet" href="../css/noname.css">
    <link rel="stylesheet" href="../css/share_style0_16.css">
    <link rel="stylesheet" href="../css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="/css/nav.css">

    <style type="text/css">
        a:hover{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="head">
    <nav class="navbar navbar-default" style="text-align: center">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img src="../images/log.png" alt="授教网">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">免费课程</a></li>
                    <li><a href="#">课程实战</a></li>
                    <li><a href="#">专栏</a></li>
                    <li><a href="#">猿问</a></li>
                    <li><a href="#">手记</a></li>
                </ul>
                <div class="navbar-left form-group search-area">
                    <input type="text" class="t-search" placeholder="">

                    <div class="searchTags">
                        <a href="#"><span class="badge">java</span></a>
                        <a href="#"><span class="badge">Python</span></a>
                    </div>
                    <div class="showhide-search">
                        <span class="glyphicon glyphicon-search search-ico" aria-hidden="true"></span>
                    </div>
                    <div class="search-area-result">
                        <div class="hot">
                            <h5>热搜</h5>
                            <div class="hot-box">
                                <a href="#"><span class="badge">java</span></a>
                                <a href="#"><span class="badge">c++</span></a>
                                <a href="#"><span class="badge">算法</span></a>
                                <a href="#"><span class="badge">面试</span></a>
                                <a href="#"><span class="badge">UI</span></a>
                                <a href="#"><span class="badge">Python</span></a>
                                <a href="#"><span class="badge">java</span></a>
                                <a href="#"><span class="badge">java</span></a>
                            </div>
                        </div>
                        <div class="history">
                            <ul>
                                <li>java</li>
                                <li>5555</li>
                                <li>555</li>
                                <li>6666</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <ul class="nav navbar-nav navbar-left">
                    <li class="mes"><a href="#">
                        <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                        消息
                        <span class="badge">3</span></a></li>
                    <li class="shop-car-l">
                    <span class="glyphicon  car-ico">
                    </span>
                        <a href="#" class="shop-car">购物车</a>
                        <div class="dropdown-menu shop-car-d">
                            <div class="cat-title-text">
                                <h2>我的购物车</h2>
                                <h5>
                                    已加入
                                    <span class="js-incart-num">0</span>
                                    门课程
                                </h5>
                            </div>
                            <div id="car-no">
                                <div class="ico-shopping">

                                </div>
                                <h3>购物车空空如也</h3>
                                <div class="text">快去这里选中意的课程吧</div>
                                <p><a href="#">实战课程</a></p>
                                <p><a href="#">就业课程</a></p>
                            </div>
                            <div id="car-have">
                                <div id="js-card-ul">
                                    <ul>
                                        <li class="car-course">
                                            <a href="#">
                                                <img src="../images/5c38442a09edab9312000676-160-90.jpg" height="72.4"
                                                     width="105"/></a>
                                            <div class="content-box">
                                                <a href="#">Node.js从零开发Web Server博客项目  前端晋升全栈工程师必备 </a>
                                                <p class="clearfix">
                                                    <span class="price">￥250.0</span>
                                                    <span class="del">删除</span>
                                                </p>
                                            </div>
                                        </li>
                                        <li class="car-course">
                                            <a href="#">
                                                <img src="../images/5c38442a09edab9312000676-160-90.jpg" height="72.4"
                                                     width="105"/></a>
                                            <div class="content-box">
                                                <a href="#">Node.js从零开发Web Server博客项目  前端晋升全栈工程师必备 </a>
                                                <p class="clearfix">
                                                    <span class="price">￥250.0</span>
                                                    <span class="del">删除</span>
                                                </p>
                                            </div>
                                        </li>
                                        <li class="car-course">
                                            <a href="#">
                                                <img src="../images/5c38442a09edab9312000676-160-90.jpg" height="72.4"
                                                     width="105"/></a>
                                            <div class="content-box">
                                                <a href="#">Node.js从零开发Web Server博客项目  前端晋升全栈工程师必备 </a>
                                                <p class="clearfix">
                                                    <span class="price">￥250.0</span>
                                                    <span class="del">删除</span>
                                                </p>
                                            </div>
                                        </li>
                                        <li class="car-course">
                                            <a href="#">
                                                <img src="../images/5c38442a09edab9312000676-160-90.jpg" height="72.4"
                                                     width="105"/></a>
                                            <div class="content-box">
                                                <a href="#">Node.js从零开发Web Server博客项目  前端晋升全栈工程师必备 </a>
                                                <p class="clearfix">
                                                    <span class="price">￥250.0</span>
                                                    <span class="del">删除</span>
                                                </p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="more-box">
                                    <span><a href="#">我的购物中心</a></span>
                                    <a href="#">
                                        <span class="car-go">去购物车</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>

                    <!--                头像-->
                    <li id="header-user-card">
                        <a id="header-avator" href="">
                            <img src="../images/head.jpg" alt="">
                        </a>
                        <div class="header-d dropdown-menu">
                            <div class="card-inner">
                                <div class="card-top">
                                    <a href="#">
                                        <img src="../images/head.jpg" alt="">
                                    </a>
                                    <div class="card-top-right-box">
                                        <a href="#">
                                        <span class="name">
                                            qq_foreverlove沉_0
                                        </span>
                                        </a>
                                        <div class="meta">
                                            <a href="#">
                                                经验
                                                <b id="js-user-mp">1785</b>
                                            </a>
                                            <a href="#">
                                                积分
                                                <b id="js-user-credit">1785</b>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="user-center-box">
                                    <ul>
                                        <li><a href=""><span class="glyphicon glyphicon-calendar"></span>我的课程</a></li>
                                        <li><a href=""><span class="glyphicon glyphicon-list-alt"></span>订单中心</a></li>
                                        <li><a href=""><span class="glyphicon glyphicon-gift"></span>积分商城</a></li>
                                        <li><a href=""><span class="glyphicon glyphicon-cog"></span>个人设置</a></li>
                                    </ul>
                                </div>
                                <div class="card-history">
                                <span class="history-item">
                                    <span class="tit text-ellipsis">使用ViewPager实现卡片式问答项目（上）</span>
                                    <span class="media-name text-ellipsis">1-1 课程介绍</span>
                                    <span class="glyphicon glyphicon-time"></span>
                                    <a class="continue" href="">继续</a>
                                </span>
                                </div>
                                <div class="card-sets">
                                    <a href="">安全退出</a>
                                </div>
                            </div>

                        </div>
                    </li>
                    <li class="header-signin" style="display: none">
                        <a id="js-signup-btn">注册</a>
                        /
                        <a id="js-signin-btn">登录</a>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div id="main">
    <div class="course-infos">
        <div class="w pr">
            <div class="path">
                <a href="/course/list">课程</a>
                <i class="path-split">\</i>
                <a class="path-direction" href="/course/list?c=be">后端开发</a>
                <i class="path-split">\</i>
                <a class="path-type" href="/course/list?c=php">PHP</a>
                <i class="path-split">\</i>
                <a href="/learn/1133">${course.name}</a>
            </div>
            <div class="hd clearfix">
                <h2 class="l">${course.name}</h2>
            </div>

            <div class="statics clearfix">
                <div class="teacher-info l">
                    <a href="/u/7170043/courses?sort=publish" target="_blank" >
                        <img data-userid="7170043" class="js-usercard-dialog" src="//img4.mukewang.com/5d03442f000154d411111084-80-80.jpg" width="80" height="80">
                    </a>
                    <span class="tit">
                <a href="/u/7170043/courses?sort=publish" target="_blank">万能的小黑</a><i class="icon-imooc"></i>
                </span>
                    <span class="job"></span>
                </div>

                <div class="static-item l">
                    <span class="meta">难度</span>
                    <span class="meta-value level">
                     </span>
                </div>
                <div class="static-item l">
                    <span class="meta">时长</span><span class="meta-value"> ${course.time}</span>
                </div>
                <div class="static-item l">
                    <span class="meta">学习人数</span><span class="meta-value js-learn-num">${course.studyNo}</span>
                </div>
                <div class="static-item l score-btn">
                    <span class="meta">综合评分</span><span class="meta-value">10.0</span>


                    <div class="score-wrap triangle">
                        <div class="score-box">
                            <a href="/coursescore/1133" class="person-num">
                                <span class="person-num l">0人评价</span>
                            </a>
                            <a href="/coursescore/1133?page=1" class="evaluation-btn r">查看评价</a>
                            <div class="score-detail-box">
                                <div class="score-static-item">
                                    <span class="meta-value">10.0</span>
                                    <span class="meta">内容实用</span>
                                </div>
                                <div class="score-static-item">
                                    <span class="meta-value">10.0</span>
                                    <span class="meta">简洁易懂</span>
                                </div>
                                <div class="score-static-item">
                                    <span class="meta-value">10.0</span>
                                    <span class="meta">逻辑清晰</span>
                                </div>
                            </div>
                            <div class="icon-drop_down"></div>
                        </div>

                    </div>

                </div>

            </div>
            <div class="extra">

                <!-- credit -->

                <!-- share -->
                <div class="share-action r bdsharebuttonbox">
                    <!--收藏-->
                    <div class="share js-follow-action"><i class="follow-action"></i><span>收藏</span></div>
                    <a href="javascript:;" class="share wx js-share icon-share-weichat" data-cmd="weixin"></a>
                    <a href="javascript:;" class="share qq js-share icon-share-qq" data-cmd="qzone"></a>
                    <a href="javascript:;" class="share sina js-share icon-share-weibo" data-cmd="tsina"></a>
                </div>
            </div>
        </div>
        <div class="info-bg" id="js-info-bg">
            <div class="cover-img-wrap">
                <img data-src="//img3.mukewang.com/images/unknow-80.png" alt="" style="display: none" id="js-cover-img">
            </div>
            <div class="cover-mask"></div>
        </div>
    </div>
    <div class="course-info-menu ">
        <div class="w">
            <ul class="course-menu">
                <li><a class="moco-change-big-btn active" id="learnOn"  href="/learn/1133">课程章节</a></li>

                <li><span>2</span><a id="qaOn" class="moco-change-big-btn " href="/qa/1133/t/0">问答评论</a></li>
                <li><a id="noteOn" class="moco-change-big-btn " href="/note/1133?sort=last&page=1">同学笔记</a></li>
                <li><span>1</span><a id="commentOn" class="moco-change-big-btn " href="/coursescore/1133">用户评价</a></li>
                <li><a style="display:none;" id="wikiOn" class="moco-change-big-btn " href="/coursewiki/1133">WIKI</a></li>
            </ul>
        </div>
    </div><!-- 课程面板 -->

    <div class="course-info-main clearfix w">

        <div class="content-wrap clearfix">
            <div class="content">
                <!-- 课程简介 -->
                <div class="course-description course-wrap">
                    简介：${course.intro}

                </div>
                <!-- 课程简介 end -->
                <c:forEach items="${course.sections}" var="s" varStatus="status">
                    <div class="course-chapters">
                        <div class="chapter course-wrap ">
                            <!-- 章节标题 -->
                            <h3>
                                第${status.index+1}章 ${s.sName}
                            </h3>
                            <div class="chapter-description">
                                ${s.sIntro}
                            </div>
                            <!-- 章节标题 end -->
                            <!-- 章节小节 -->
                            <ul class="video">
                                <c:forEach items="${s.minutias}" var="m">
                                    <li data-media-id="19575">
                                        <a href='/video/19575' class="J-media-item">
                                            <span class="glyphicon glyphicon-play type"></span>
                                            ${m.mName}

                                            <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>

                                        </a>
                                    </li>
                                </c:forEach>
                            </ul>
                            <!-- 章节小节 end -->
                        </div>
                    </div>
                </c:forEach>
            </div>
            <div class="aside r">
                <div class="course-wrap course-aside-info js-usercard-box">
                    <div class="learn-btn">
                        <a href="/video/19575" class="moco-btn moco-btn-red moco-btn-lg J-learn-course">开始学习</a>
                    </div>
                    <div class="course-info-tip">
                        <dl class="first">
                            <dt>课程须知</dt>
                            <dd class="autowrap">1.具备基础Java知识
                                2.了解Spring基本知识
                                3.了解SpringBoot相关知识
                            </dd>
                        </dl>
                        <dl>
                            <dt>老师告诉你能学到什么？</dt>
                            <dd class="autowrap">1.分布式架构的前世今生：SpringCloud微服务框架和Dubbo的比较
                                2.SpringCloud微服务架构相关技术
                                3.API网关:应用场景+业界使用情况+实战与原理分析（涵盖：ZUUL1.X,ZUUL 2.X,GATEWAY）
                                4.服务发现：应用场景+业界使用情况+实战与选型（涵盖：EUREKA,ZK,CONSUL，ETCD）</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--登录界面-->
<div class="modal-backdrop" id="modal-backdrop" style="display: none"></div>
<div id="signin" class="rl-modal" style="display: none">
    <div class="rl-modal-header">
        <button class="rl-close" type="button"></button>
        <h1>
            <span class="btn-login">登录</span>
            <span class="btn-register active-title">注册</span>
        </h1>
    </div>
    <div id="signup" class="rl-modal-body ">
        <form id="signup-form" action="">
            <div class="rlf-group">
                <input id="register-phone" type="text" class="ipt" maxlength="37" value="" placeholder="请输入注册的手机号"
                       name="phone" autocomplete="off">
                <p class="rlf-tip-wrap">请输入正确的手机号</p>
            </div>

            <div class="rlf-group has-error">
                <a href="#" class="verify-img-wrap" id="changeImg">
                    <canvas class="show-captcha" id="canvas" width="130" height="38"></canvas>
                </a>
                <input id="register-pictureCheck" type="text" class="ipt" maxlength="6" value="" placeholder="请输入验证码"
                       name="checkno" autocomplete="off">
                <p class="rlf-tip-wrap">请输入正确的验证码</p>
            </div>
            <div class="rlf-group phoneVerityBox">
                <input type="checkbox" class="auto-cbx" autocomplete="off">&nbsp;&nbsp;同意
                <a href="" class="ipt-agreement">《授教网注册协议》</a>
            </div>
            <p id="signin-globle-error"></p>
            <div class="rlf-group phoneVerityBox">
                <input id="moco-btn-register" type="button" class="moco-btn" value="注册">
            </div>
        </form>
    </div>

    <div id="register-signin" class="rl-modal-body " style="display: none">
        <form id="signin-form" action="">
            <p class="title">填写短信验证码密码完成注册</p>
            <p class="subtitle">
                短信验证码已发送至
                <span name="phone"  class="js-phoneNumber">17606556909</span>
                <!--                <input type="text" name="phone" style="display: none" value="17606556909">-->
            </p>

            <div class="rlf-group js-phoneVerityBox">
                <p class="rsSend">
                    <button type="button" class="js-register-send" state="false">重新发送</button>
                </p>
                <input id="register-checkno" type="text" class="ipt" maxlength="6" value="" placeholder="请输入短信验证码"
                       name="checkno" autocomplete="off">
                <p class="rlf-tip-wrap"></p>
            </div>
            <div class="rlf-group">
                <a class="proclaim-btn" hidefocus="true">
                    <span class="glyphicon glyphicon-eye-close"></span>
                </a>
                <input id="register-pwd" type="password" class="ipt" maxlength="16" value="" placeholder="请输入6-16位密码,区分大小写,不能用空格"
                       name="pwd" autocomplete="off">
                <p class="rlf-tip-wrap">请输入6-16位密码,区分大小写,不能用空格</p>
            </div>
            <div class="rlf-group">
                <input type="button" class="moco-btn moco-btn-register1" value="完成">
            </div>
            <p class="backNotify">返回修改手机号</p>
        </form>
    </div>

    <div class="rl-modal-body js-loginWrap" style="display: none">
        <div>
            <form id="signup-form" action="">
                <div class="rlf-group">
                    <input id="login-phone" type="text" class="ipt" maxlength="37" value="" placeholder="请输入登录的手机号"
                           name="phone" autocomplete="off">
                    <p class="rlf-tip-wrap">请输入正确的手机号</p>
                </div>
                <div class="rlf-group js-loginPassword">
                    <a class="proclaim-btn" hidefocus="true">
                        <span class="glyphicon glyphicon-eye-close"></span>
                    </a>
                    <input id="login-pwd" type="password" class="ipt" maxlength="16" value="" placeholder="请输入密码"
                           name="password" autocomplete="off">
                    <p class="rlf-tip-wrap">请输入6-16位密码,区分大小写,不能用空格</p>
                </div>
                <div class="rlf-group js-phoneVerityBox">
                    <p class="rsSend">
                        <button type="button" class="js-signin-send" state="true" >获取验证码</button>
                    </p>
                    <input id="login-checkno" type="text" class="ipt" maxlength="6" value="" placeholder="请输入短信验证码"
                           name="checkno" autocomplete="off">
                    <p class="rlf-tip-wrap">请输入6位纯数字的短信验证码</p>
                </div>
                <div class="rlf-group phoneVerityBox">
                    <input type="checkbox" class="auto-cbx auto-login" autocomplete="off">&nbsp;&nbsp;7天内自动登录
                    <a href="#" class="rlf-forget">找回密码</a>
                </div>
                <p id="login-globle-error">账号密码错误</p>
                <div class="rlf-group phoneVerityBox">
                    <input type="button" loginway="code" class="moco-btn moco-btn-login" value="登录">
                </div>
                <div class="rlf-group phoneVerityBox">
                    <span class="rlf-other" state="loginPassword">账号密码登录</span>
                </div>
            </form>
        </div>
    </div>
    <div class="rl-modal-body reg-success1" style="display: none;text-align: center">
        <span class="icon-send-success">
            <span class="glyphicon glyphicon-ok"></span>
        </span>
        <p>恭喜注册成功</p>
        <div class="rlf-group" style="text-align: center">
            <input type="text" class="moco-btn js-gotoLearn" value="返回登录">
            <div>
                <a href="">完善资料</a>
            </div>
        </div>
    </div>
</div>
<script src="/js/jQuery v3.3.1.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
    function loadCourseMes() {
        $.ajax({
            url:"/course/mes/${course.id}",
            type:"get",
            async:false,
            dataType:"json",
            success:function (result) {
                $.each(result,function (v,l) {
                    $(".path-direction").empty().text(l.name);
                    $.each(l.courseTypes,function (v1,l1) {
                        $(".path-type").empty().text(l1.name)
                    })
                })
            }

        })
    }
    function loadLevel(level){
        console.log(level);
        var text = "初级";
        if (level==2) {
            text = "中级"
        }else if(level == 3){
            text = "高级";
        }
        $(".level").empty().text(text);
    }
    loadCourseMes();
    loadLevel(${course.level});
</script>
<script src="../js/nav.js"></script>
</body>
</html>
